<!-- eslint-disable -->
<template>
  <el-card class="box-card">
    <el-table :data="applicationList" border style="width: 100%">
      <el-table-column prop="id" label="报名编号" width="180" align="center"></el-table-column>
      <el-table-column prop="nickname" label="学员姓名" width="100" align="center"></el-table-column>
      <el-table-column prop="type" label="驾照类型" width="100" align="center"></el-table-column>

      <el-table-column prop="photo" label="学员头像" width="150" class="imgwrap" align="center">
        <template v-slot="{ row }">
          <img :src="row.photo" alt />
        </template>
      </el-table-column>
      <el-table-column prop="status" label="审核状态" width="100" align="center"></el-table-column>
      <el-table-column prop="money" label="支付状态" width="100" align="center"></el-table-column>

      <el-table-column prop="address" label="操作" align="center">
        <template slot-scope="{ row, index }">
          <el-button
            type="danger"
            size="medium"
            icon="el-icon-delete"
            title="删除"
            :disabled="info.role !== 'admin'"
            @click="deleteApps(row)"
          ></el-button>
          <el-button
            type="warning"
            size="medium"
            icon="el-icon-s-check"
            title="审核"
            :disabled="info.role !== 'admin'"
            @click="toCheck(row)"
          ></el-button>
          <el-button
            type="info"
            size="medium"
            icon="el-icon-wallet"
            :title="row.money == '已支付' ? '已支付' : '前往支付'"
            :disabled="info.nickname !== row.nickname || row.money == '已支付'"
            @click="toMoney(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[4, 6, 8, 10]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <!-- 审核弹出框 -->
    <el-dialog title="审核" :visible.sync="dialogVisible" width="30%">
      <el-select v-model="checkform.status" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="checkStatus">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>
<script>
/*eslint-disable*/
import { appList, deleteApplication, checkApp, pay } from "@/api/application";
import { getToken } from "@/utils/auth";
import { mapState } from "vuex";
export default {
  data() {
    return {
      options: [
        {
          value: "待审核",
          label: "待审核",
        },
        {
          value: "审核中",
          label: "审核中",
        },
        {
          value: "审核通过",
          label: "审核通过",
        },
        {
          value: "审核失败",
          label: "审核失败",
        },
      ],
      checkform: {
        status: "",
        id: null,
      },
      moneyForm: {
        id: null,
      },

      total: 0,
      pagesize: 4,
      pageNumber: 1,
      applicationList: [],
      dialogVisible: false,
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
      this.getAppList();
    },
    handleCurrentChange(val) {
      this.pageNumber = val;
      this.getAppList();
    },
    async getAppList() {
      let res = await appList({
        pagesize: this.pagesize,
        pageNumber: this.pageNumber,
      });
      if (res.code == 200) {
        console.log(this.info, "info");
        this.applicationList = res.data;
        this.applicationList.forEach(element => {
          element.photo = element.photo  + `?token=${getToken()}`
        });
        this.total = res.totalCount;
        this.$message({
          message: res.message,
          type: "success",
        });
      }
    },
    async deleteApps(row) {
      let res = await deleteApplication(row.id);
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.getAppList();
      }
    },
    toCheck(row) {
      this.checkform.id = row.id;
      this.dialogVisible = true;
    },
    async checkStatus() {
      let res = await checkApp(this.checkform);
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.dialogVisible = false;
        this.getAppList();
      }
    },
    // 前往缴费
    async toMoney(row) {
      let res = await pay(row.id);
      console.log(res);
      if (res.code == 200) {
        window.open(res.paymentUrl);
        this.getAppList();
      }
    },
  },
  mounted() {
    this.getAppList();
  },
  computed: {
    ...mapState({
      info: (store) => store.user.info,
    }),
  },
};
</script>

<style scoped>
img {
  width: 130px;
  height: 130px;
  margin-right: 15px;
}
.box-card {
  width: 1200px;
  margin-left: 50px;
  margin-top: 50px;
}
</style>
